<template>
  <van-popup v-model="show" position="bottom">
    <div
      v-show="priceTypeShow || priceModelShow"
      class="allbox"
      @click="hideAllOption"
    ></div>
    <div class="box">
      <div class="btop">
        <span class="t1">{{ $t("common.pingcang") }}</span>
        <img
          @click="show = false"
          class="close-img"
          src="../../../assets/images/close.png"
          alt=""
        />
      </div>
      <div class="main1">
        <div class="m1-li">
          <div class="mli1">{{ $t("common.heyue") }}</div>
          <div class="mli2" :class="detail.side == '多' ? 'green' : 'red'">
            {{ detail.symbolName }}{{ $t("common.yongxu") }}/{{
              detail.side == "多" ? $t("long.duo") : $t("long.kong")
            }}{{ detail.multiple }}X
          </div>
        </div>
        <div class="m1-li">
          <div class="mli1">
            {{ $t("common.kaicangjiage") }}（{{ detail.mainCurName }}）
          </div>
          <div class="mli2">{{ detail.openAvgPrice || "--" }}</div>
        </div>
        <div class="m1-li">
          <div class="mli1">
            {{ $t("common.biaojijiage") }}（{{ detail.mainCurName }}）
          </div>
          <div class="mli2">{{ detail.markPrice || "--" }}</div>
        </div>
      </div>
      <div class="main2">
        <div class="m2-item1">
          <div class="m2f1">
            {{ $t("common.jiage") }}
            {{ triggerPrice ? " ≈" + triggerPrice + "USDT" : "" }}
          </div>
          <div class="shijiabox" v-show="priceType == '市价'">
            <div class="sj1">{{ $t("common.shijia") }}</div>
            <div class="sj1">{{ detail.mainCurName }}</div>
          </div>
          <div class="m2-input" v-show="priceType == '限价'">
            <div class="m2-l1">
              <van-field
                v-model="submitForm.price"
                :placeholder="
                  priceModel == '%'
                    ? $t('common.yujishouyilv')
                    : $t('common.jiage')
                "
                type="number"
              />
            </div>
            <div class="m2-l2" @click="priceModelShow = true">
              <div>{{ priceModel }}</div>
              <img
                class="xia-img"
                src="../../../assets/images/xia.png"
                alt=""
              />
            </div>
            <div class="botbox" v-if="priceModelShow">
              <div class="botitem" @click.stop="showPriceModel('USDT')">
                USDT
              </div>
              <div class="botitem" @click.stop="showPriceModel('%')">%</div>
            </div>
          </div>
        </div>
        <div class="m2-item2">
          <div class="m2f1">{{ $t("long.weituoleixing") }}</div>
          <div class="m2-input" @click="priceTypeShow = true">
            <div class="m2-l1">
              {{ priceType }}
            </div>
            <div class="m2-l2">
              <img
                class="xia-img"
                src="../../../assets/images/xia.png"
                alt=""
              />
            </div>
            <div class="botbox" v-if="priceTypeShow">
              <div class="botitem" @click.stop="showTypeModel('市价')">
                {{ $t("common.shijia") }}
              </div>
              <div class="botitem" @click.stop="showTypeModel('限价')">
                {{ $t("common.xianjia") }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main3">
        <div class="m3-1">{{ $t("common.shuliang") }}</div>
        <div class="m3-2">
          <div class="m3-l1">
            <van-field
              v-model="submitForm.showNum"
              placeholder=""
              @focus="onfocus"
              type="type"
            />
          </div>
          <div class="m3-l2">
            {{
              curyType != "zhang"
                ? curyType == "main"
                  ? detail.mainCurName
                  : detail.tokenCurName
                : $t("common.zhang")
            }}
          </div>
        </div>
      </div>
      <div class="hbox">
        <div
          class="hitem"
          v-for="item in 4"
          :key="item"
          @click="chooseProcess(item)"
        >
          <div class="hzhu" :class="processNum >= item + 1 ? 'lan' : ''"></div>
          <div class="hfont">{{ 25 * item }}%</div>
        </div>
      </div>
      <div class="main1">
        <div class="m1-li">
          <div class="mli1">{{ $t("long.cangweishuliang") }}</div>
          <div class="mli2">
            {{
              curyType != "zhang"
                ? curyType == "token"
                  ? detail.availableNum
                  : detail.availableMainCurNum
                : $formatMoney(parseInt(detail.availableNum * detail.sheet),11)
            }}
            {{
              curyType != "zhang"
                ? curyType == "token"
                  ? detail.tokenCurName
                  : detail.mainCurName
                : $t("common.zhang")
            }}
          </div>
        </div>
        <div class="m1-li">
          <div class="mli1">{{ $t("long.yujiyingkui") }}</div>
          <div class="mli2" :class="+showExpect >= 0 ? 'green' : 'red'">
            {{ showExpect }}USDT
          </div>
        </div>
      </div>
      <van-button type="info" class="confirm" @click="handleSubmit">{{
        $t("long.queren")
      }}</van-button>
    </div>
  </van-popup>
</template>

<script>
import { Toast } from "vant";
export default {
  props: ["curyType"],
  data() {
    return {
      num: 0,
      processNum: 5,
      priceTypeShow: false,
      priceModelShow: false,
      submitForm: {
        price: "",
        showNum: "",
      },
      detail: {},
      show: false,
      priceType: "市价",
      priceModel: "USDT",
    };
  },
  created() {},
  computed: {
    triggerPrice() {
      console.log(this.detail);
      if (this.priceModel == "%") {
        let price = 0;
        let openAvgPrice = +this.detail.openAvgPrice;
        if (this.detail.side == "多") {
          price =
            (+this.submitForm.price / 100 / this.detail.multiple) *
              openAvgPrice +
            openAvgPrice;
        } else {
          price =
            (-(+this.submitForm.price / 100) / this.detail.multiple) *
              openAvgPrice +
            openAvgPrice;
        }
        price = this.$myfixedNum(price, 2);
        return +this.submitForm.price ? price : "";
      } else {
        return "";
      }
    },
    //预计盈亏
    showExpect() {
      let num;
      let item = this.detail;
      let openAvgPrice = +item.openAvgPrice;
      let nowNum = +item.availableNum;
      let markPrice = +item.markPrice;
      if (this.submitForm.showNum.toString().includes("%")) {
        num = nowNum * ((this.processNum - 1) / 4);
      } else {
        num =
          this.curyType == "token"
            ? +this.submitForm.showNum
            : +this.submitForm.showNum / openAvgPrice;
      }
      let zprice = this.submitForm.price;
      if (this.priceModel == "%") {
        zprice = this.triggerPrice;
      }
      let ret =
        ((this.priceType == "市价" ? markPrice : zprice) - openAvgPrice) * num;
      if (item.side == "多") {
        return this.$myfixedNum(+ret, 2);
      } else {
        return -this.$myfixedNum(+ret, 2);
      }
    },
  },
  methods: {
    reset() {
      (this.num = 0), (this.processNum = 5);
      this.priceTypeShow = false;
      this.priceModelShow = false;
      this.submitForm = {
        price: "",
        showNum: "",
      };
      this.priceType = "市价";
      this.priceModel = "USDT";
    },
    hideAllOption() {
      this.priceTypeShow = false;
      this.priceModelShow = false;
    },
    onfocus() {
      this.submitForm.showNum = "";
      this.processNum = 0;
    },
    chooseProcess(item) {
      this.processNum = +item + 1;
      let znum = +((this.num * +item) / 4);
      if (this.curyType == "zhang") {
        znum = parseInt(znum);
      } else {
        znum = this.$myfixedNum(
          znum,
          this.curyType == "token"
            ? +this.detail.tokenCurAccuracy
            : +this.detail.mainCurAccuracy
        );
      }
      this.submitForm.showNum = `${25 * +item}%(≈${znum})`;
    },
    init() {
      this.num =
        this.curyType != "zhang"
          ? this.curyType == "token"
            ? this.detail.availableNum
            : this.detail.availableMainCurNum
          : parseInt(this.detail.availableNum * this.detail.sheet);
      this.submitForm.showNum = `100%(≈${this.num})`;
    },
    async handleSubmit() {
      let number = 0;
      if (this.submitForm.showNum.toString().includes("%")) {
        number = (this.detail.nowNum * (+this.processNum - 1)) / 4;
      } else {
        number =
          this.curyType != "zhang"
            ? this.curyType == "token"
              ? +this.submitForm.showNum
              : +this.submitForm.showNum / +this.detail.openAvgPrice
            : (+this.submitForm.showNum / this.detail.sheet);
      }


      let price = 0;
      if (this.priceType == "市价") {
        price = this.detail.markPrice;
      } else {
        if (this.priceModel == "%") {
          price = +this.triggerPrice;
        } else {
          price = +this.submitForm.price;
        }
      }

      number = parseInt(number * +this.detail.sheet) / +this.detail.sheet
      let params = {
        num: number,
        positionId: this.detail.id,
        price: price,
        type: this.priceType == "市价" ? 0 : 1,
      };


      // params.num = this.$myfixedNum(params.num, +this.tokenCur.accuracy);
      console.log("平仓参数", params);
      const ret = await this.$http({
        url: "/contract/app/order/close",
        method: "post",
        data: params,
      });
      if (ret.data.code === 0) {
        Toast(this.$t("long.contracttoast2"));
        this.show = false;
      }
    },
    showTypeModel(val) {
      this.priceType = val;
      this.priceTypeShow = false;
      this.priceModel = "USDT";
      this.submitForm.price = this.detail.markPrice;
    },
    showPriceModel(val) {
      this.priceModel = val;
      this.priceModelShow = false;
      this.submitForm.price = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: #090A1B;
}
.box {
  padding: 3vw 3vw 6vw;
  .btop {
    width: 100%;
    height: 10vw;
    position: relative;
    line-height: 10vw;
    text-align: center;
    font-size: 4.5vw;
    .close-img {
      width: 7vw;
      position: absolute;
      right: 0vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .main1 {
    padding: 5vw 0;
    border-bottom: 1px solid #171A2B;
    .m1-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 7vw;
      .mli1 {
        font-size: 3.2vw;
        color: #8992AE;
      }
      .mli2 {
        font-size: 3.4vw;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}
.main2 {
  display: flex;
  margin: 4vw 0;
  .m2-item1 {
    display: flex;
    width: 60%;
    flex: 0 0 60%;
    margin-right: 2vw;
    flex-direction: column;
  }
  .m2-item2 {
    flex: 1;
    flex-direction: column;
  }
  .m2f1 {
    text-align: left;
    font-size: 3.2vw;
    color: #8992AE;
    margin-bottom: 2vw;
  }
  .shijiabox {
    height: 12vw;
    border-radius: 4px;
    display: flex;
    padding: 0 3vw;
    justify-content: space-between;
    align-items: center;
    background: rgb(79, 82, 93) !important;
    color: #8992AE !important;
    font-size: 3.6vw;
  }
  .m2-input {
    height: 12vw;
    background-color: #171A2B;
    border-radius: 4px;
    display: flex;
    padding: 0 3vw;
    align-items: center;
    position: relative;
    .botbox {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;
      right: 0;
      background-color: #171A2B;
      border-radius: 0 0 2px 2px;
      font-size: 3.4vw;
      z-index: 200;
      .botitem {
        width: 10vw;
        padding: 3.4vw 6vw;
        text-align: center;
        color: #fff;
      }
    }
    .m2-l1 {
      width: 60%;
      flex: 0 0 60%;
      margin-right: 2vw;
      margin-left: 2vw;
      font-size: 3.6vw !important;
    }
    .m2-l2 {
      display: flex;
      flex: 1;
      align-items: center;
      font-size: 3.8vw;
      color: #8992AE;
      justify-content: flex-end;
      position: relative;

      .xia-img {
        width: 4.2vw;
        margin-left: 2vw;
        position: relative;
        top: -2px;
      }
    }
  }
}
.main3 {
  display: flex;
  flex-direction: column;
  .m3-1 {
    text-align: left;
    font-size: 3.2vw;
    color: #8992AE;
    margin-bottom: 2vw;
  }
  .m3-2 {
    height: 12vw;
    background-color: #171A2B;
    border-radius: 4px;
    display: flex;
    padding: 0 3vw;
    align-items: center;
    font-size: 3.8vw;
    .m3-l1 {
      width: 60%;
      flex: 0 0 60%;
    }
    .m3-l2 {
      flex: 1;
      text-align: right;
      color: #8992AE;
    }
  }
}
.van-cell {
  background-color: #171A2B;
  color: #fff !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
::v-deep .van-field__control {
  color: #fff !important;
}
.hbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4vw 0 0;
  .hitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 1vw;
    &:last-child {
      padding: 0;
    }
    .hzhu {
      width: 100%;
      height: 3.2vw;
      background-color: #8992AE;
      border-radius: 2px;
      margin-bottom: 1vw;
    }
    .lan {
      background-color: rgb(10, 122, 255);
    }
    .hfont {
      font-size: 3.2vw;
      color: #8992AE;
    }
  }
}
.confirm {
  width: 100%;
  height: 10vw;
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
.allbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}
</style>